<template>
    <Row gutter="16">
        <Col span="24">
        <Card>
            <Icon type="wifi"></Icon>
            通讯状态：
            <Button type="text" style="color:#EF6AFF">全部</Button>
            <Button type="text">在线</Button>
            <Button type="text">离线</Button>
            <br>
            <Icon type="battery-low"></Icon>
            电池电量：
            <Button type="text">全部</Button>
            <Button type="text">正常</Button>
            <Button type="text">电量低</Button>
            <br>
            <Icon type="locked"></Icon>
            门锁类型：
            <Button type="text">蓝牙锁</Button>
            <Button type="text">WIFI锁</Button>
            <br>
            <Icon type="ios-barcode-outline"></Icon>
            门锁编码：<Input placeholder="如：2018" size="small" style="width: 300px"></Input>
            房间编号：<Input placeholder="如：2018" size="small" style="width: 300px"></Input>

            <Tooltip content="搜索" placement="right-start">
                <Button type="info" shape="circle" icon="ios-search-strong" size="small"></Button>
            </Tooltip>
        </Card>
        </Col>

        <Col span="24" style="margin-top: 5px;">
        <Card :bordered="false">
            <p slot="title">
                <Icon type="ios-pricetags"></Icon>
                我的智能门锁
            </p>
            <a href="#" slot="extra">
                <Tooltip content="安装门锁" placement="bottom-start">
                    <Button type="info" @click="installLock()">安装门锁</Button>
                </Tooltip>
                <Tooltip content="导出门锁" placement="bottom-start">
                    <Button type="success">导出门锁</Button>
                </Tooltip>
                <Tooltip content="门锁授权" placement="bottom-start">
                    <Button type="warning">门锁授权</Button>
                </Tooltip>
                <Tooltip content="刷新" placement="bottom-start">
                    <Button type="success" shape="circle" icon="refresh" @click="loadMenuData()"></Button>
                </Tooltip>
            </a>

            <Table highlight-row :loading="loading" stripe border :columns="columns" :data="roleRows"
                   @on-current-change="roleHandleRowChange" @on-row-click="rowClickRole"></Table>

            <div style="margin: 10px;overflow: hidden">
                <div style="float: right;height: 40px;">
                    <Page :total="total" show-total="true" placement="top" show-elevator @on-change="goPage"></Page>
                </div>
            </div>

            <Spin fix size="large" fix v-if="spinShowPanel">
                <Icon type="load-c" size=18 class="demo-spin-icon-load"></Icon>
                <div>拼命加载中...</div>
            </Spin>

        </Card>
        </Col>

        <Modal v-model="modal" title="添加门锁" @on-ok="ok" @on-cancel="cancel" :mask-closable="false">
            <div>
                <Form :model="formItem" :label-width="80">
                    <FormItem label="门锁编码：">
                        <Input v-model="formItem.input" placeholder="门锁编码" icon="navicon"></Input>
                    </FormItem>
                    <FormItem label="房间编号：">
                        <Input v-model="formItem.input" placeholder="门锁编码" icon="navicon"></Input>
                    </FormItem>

                    <FormItem label="房源编号：">
                        <Input v-model="formItem.input" placeholder="门锁编码" icon="navicon"></Input>
                    </FormItem>
                    <FormItem label="房屋编号：">
                        <Input v-model="formItem.input" placeholder="门锁编码" icon="navicon"></Input>
                    </FormItem>
                    <FormItem label="默认密码：">
                        <Input v-model="formItem.input" placeholder="门锁编码" icon="navicon"></Input>
                    </FormItem>
                    <FormItem label="门锁编码：">
                        <Input v-model="formItem.input" placeholder="门锁编码" icon="navicon"></Input>
                    </FormItem>
                    <FormItem label="校验码：">
                        <Input v-model="formItem.input" placeholder="门锁编码" icon="navicon"></Input>
                    </FormItem>
                    <FormItem label="运营商：">
                        <Input v-model="formItem.input" placeholder="门锁编码" icon="navicon"></Input>
                    </FormItem>
                    <FormItem label="网关：">
                        <Input v-model="formItem.input" placeholder="门锁编码" icon="navicon"></Input>
                    </FormItem>
                    <FormItem label="备注：">
                        <Input v-model="formItem.input" type="textarea" :autosize="{minRows: 2,maxRows: 5}"></Input>
                    </FormItem>

                </Form>

            </div>
        </Modal>

    </Row>

</template>
<script>
    export default {
        data() {
            return {
                modal: false,
                formItem: {},
                columns: [
                    {
                        type: 'selection',
                        width: 60,
                        align: 'center'
                    },
                    {
                        title: '门锁编码',
                        key: 'roleName',
                        sortable: true,
                        editable: true
                    },
                    {
                        title: '房源编码',
                        key: 'permission',
                        sortable: true,
                        //fixed: 'left'
                    },
                    {
                        title: '房间编号',
                        sortable: true,
                        key: 'createPerson'

                    },
                    {
                        title: '门锁类型',
                        sortable: true,
                        key: 'createPerson'
                    },
                    {
                        title: '通讯状态',
                        sortable: true,
                        key: 'createPerson'
                    },
                    {
                        title: '电池电量',
                        sortable: true,
                        key: 'createPerson'
                    },
                    {
                        title: '安装地址',
                        sortable: true,
                        key: 'createPerson'
                    },
                    {
                        title: '安装时间',
                        sortable: true,
                        key: 'createPerson'
                    },
                    {
                        title: '运营商',
                        sortable: true,
                        key: 'createPerson'
                    },
                    {
                        title: '网关',
                        sortable: true,
                        key: 'createPerson'
                    },
                    {
                        title: '通讯状态',
                        key: 'roleStatus',
                        render: (h, params) => {
                            let roleStatus = params.row.roleStatus;
                            return h('div', [
                                h('Tag', {
                                    props: {
                                        color: roleStatus == 1 ? "green" : "red"
                                    },
                                    on: {
                                        "on-change": (status) => {

                                        }
                                    }
                                }, roleStatus == 1 ? "启用" : "停用"),
                            ]);
                        }
                    }

                ],
            }
        },
        methods: {
            handleStart() {
                let lastPath = sessionStorage.getItem("lastPath");
                this.$router.push({path: lastPath});
            },
            ok() {
                this.$Message.info('Clicked ok');
            },
            cancel() {
                this.$Message.info('Clicked cancel');

            },
            installLock() {
                this.modal = true;
            }
        }
    }
</script>
